<template>
  <node-common
    title="开始"
    iconName="start-node"
    :isSelected="isSelected"
    :isHovered="isHovered"
    :model="model"

    @handleMenu="handleMenu"
  >
    <div>
      <div style="display: flex">
        <span style="color: #999; width: 60px; margin-right: 8px">输入字段</span>
        <span class="ellipsis">{{ getInputParams }}</span>
      </div>
      <div class="ellipsis" style="font-size: 12px;color:#666;">{{ getRemarks }}</div>
    </div>
  </node-common>
</template>

<script setup>
import { computed } from 'vue';
import { ref, onMounted, reactive, watch } from 'vue';
import { useFlowRunStore } from '@/store/modules/airagFlowRunStore';
import NodeCommon from '../base-node.vue';
const runStore = useFlowRunStore();
const props = defineProps({
  model: {
    type: Object,
    default: null
  },
  properties: {
    type: Object,
    default: null
  },
  isHovered: {
    type: Boolean,
    default: false
  },
  isSelected: {
    type: Boolean,
    default: false
  }
  // runStatus: {
  //   type: String,
  //   default: ''
  // }
});
const menus = ref([{ name: '删除', key: 'delete', color: '#fb363f' }]);
const getRemarks = computed(() => {
  return props.properties?.remarks;
});
const getInputParams = computed(() => {
  return props.properties?.inputParams?.map(item => item.name).join(',');
});
const getRunStatus = computed(() => {
  if (!(runStore.isRunning || runStore.isFinished)) {
    var status = '';
    if (props.isSelected) {
      status = ' isHovered isSelected';
    } else {
      if (props.isHovered) {
        status = ' isHovered';
      }
    }
    return { status: status, timeText: '' };
  }

  const nodeStep = runStore.nodeSteps.find(step => step.node.id === props.model.id);
  return nodeStep
    ? { status: 'run-status-' + nodeStep.status, timeText: nodeStep.timeText }
    : { status: 'run-status-waiting', timeText: '' };
});

const handleMenu = item => {
  if (item.key === 'delete') {
  }
};
const test = () => {
  console.log(runStore);
};
</script>
<style  lang='less' scoped>
.ellipsis {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
</style>